<template>
    <view class="safe-area-inset-bottom conatiner">
        <block v-for="(order, index) in list" :key="index">
            <view class="invoice-item">
                <view class="u-flex u-col-center u-row-between">
                    <view>
                        <u-checkbox v-model="order.check" @change="itemCheckStatusChange" active-color="#FC4F75"></u-checkbox>
                        <text style="font-size: 24rpx">订单号：</text>
                        <text>{{ order.id }}</text>
                    </view>
                    <view class="invoice-item-time">
                        {{ order.addTime }}
                    </view>
                </view>
                <view class="u-p-t-40 u-p-b-40">
                    <block v-for="(item, index) in order.skus" :key="index">
                        <view class="sku u-flex u-row-between">
                            <img-cache :src="`${global.productImageUrl}${item.picId}/1`" width="150" height="150" border-radius="10" class="sku-image"></img-cache>
                            <view class="u-flex-1 u-margin-left-20 u-line-2">
                                <view class="sku-name">{{ item.name }}</view>
                                <view class="sku-info">共 {{ item.num }} 件</view>
                            </view>
                        </view>
                    </block>
                </view>
                <view class="u-flex u-col-center u-row-between">
                    <text>共 {{ order.totalNum }} 件</text>
                    <view>
                        <text>订单金额：</text>
                        <text class="o-font-color-price">￥{{ Number(order.totalPrice).toFixed(2) }}</text>
                    </view>
                </view>
            </view>
        </block>
    </view>
</template>

<script lang="ts" setup>
import global from '@/config'
import { nextTick } from 'vue'

interface Props {
    list: Array<any>
}
const props = withDefaults(defineProps<Props>(), {
    list: () => []
})

const emit = defineEmits(['callback'])
const itemCheckStatusChange = () => {
    nextTick(() => {
        let selectAll = !props.list.some(m => !m.check)
        let orderNum = 0 //申请开票的订单数量
        let total = 0 // 开票合计金额
        props.list.forEach(order => {
            if (order.check) {
                orderNum += 1
                total += order.totalPrice
            }
        })
        emit('callback', {
            status: selectAll,
            orderNum,
            total
        })
    })
}
</script>

<style scoped lang="scss">
.invoice-item {
    background-color: $uni-bg-color;
    padding: 20rpx 30rpx;
    margin-top: 20rpx;

    &-time {
        font-size: 24rpx;
    }

    .sku {
        line-height: 50rpx;
        margin-bottom: 20rpx;

        &-image {
            margin-left: 20rpx;
            flex-shrink: 0;
        }

        &-name {
            min-height: 100rpx;
            font-weight: bold;
        }

        &-info {
            text-align: right;
        }
    }
}
</style>
